import React, { Component } from 'react'
import { Form, Input } from "antd";
import PropTypes from 'prop-types'

const Item = Form.Item;

class AddForm extends Component {

    static propTypes = {
        setForm: PropTypes.func.isRequired, // 用来传递 form 对象的函数
    }

    UNSAFE_componentWillMount() {
        this.props.setForm(this.props.form);
    }

    render() {

        const { getFieldDecorator } = this.props.form;
        //  指定 Item 布局的配置对象
        const formItemLayout = {
            labelCol: { span: 4 }, // 左侧 label 的宽度
            wrapperCol: { span: 15 }, // 右侧包裹的宽度
        }

        return (
            <Form>
                <Item label='角色名称' {...formItemLayout}>
                    {
                        getFieldDecorator('roleName', {
                            initiaValue: '',
                            rules: [
                                {required: true, message: '角色名称必须输入'}
                            ]
                        })(
                            <Input placeholder='请输入角色名称' />
                        )
                    }
                </Item>
            </Form>
        )
    }
}

export default Form.create()(AddForm)